<template>
    <div class="dormitory-list">
        <div class="content-head">
            <span :class="activePanel === 'lists' ? 'head-active-title' : ''" @click="changePanel('lists')">住宿列表</span>
            <span :class="activePanel === 'record' ? 'head-active-title' : ''" @click="changePanel('record')">访客记录</span>
            <a id="maodian" href="#"></a>
        </div>

        <div v-if="dormList.length > 0">
            <div v-if="activePanel === 'lists'">
                <div class="content-banner" v-loading="loading.status" :element-loading-text="loading.txt">
                    <div class="banner-search">
                        <img src="./../../../assets/images/dormitory/building.png" alt="宿舍楼">
                        <el-autocomplete
                            v-model="keyword"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="输入学生账号或姓名"
                            @select="getFloorList">
                            <i class="el-icon-search el-input__icon" slot="suffix"></i>
                        </el-autocomplete>
                    </div>
                    <div class="banner-list">
                        <img src="./../../../assets/images/dormitory/building_bg.png" alt="宿舍楼">
                        <el-carousel 
                            trigger="click" 
                            ref="carouselBanner"
                            :autoplay="false"
                            :arrow="showDormArrow" 
                            :indicator-position="showDormIndicator"
                            :initial-index="activeIndex"
                            height="236px">
                            <el-carousel-item v-for="(item, inx) in Math.ceil(dormList.length/10)" :key="inx">
                                <div 
                                    v-for="(item1, inx1) in getDormNum(inx)" 
                                    class="banner-dorm-list"
                                    :class="getStyle(inx, inx1)" 
                                    :key="inx1" 
                                    @click="changeDorm(item1, inx, inx1)">
                                    <img :src="getImage(inx, inx1)" alt="">
                                    <span>{{item1.name}}</span>
                                    <img v-if="inx === activeIndex && inx1 === dormIndex" class="selected-img" src="./../../../assets/images/dormitory/selected.png" alt="">
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="banner-num">
                        <span>{{dormName}}：</span>
                        <div>
                            <div>
                                <img src="./../../../assets/images/dormitory/people.png" alt="最大入住">
                                <span>最大入住：{{floorList.maxNum}}人  </span>
                            </div>
                            <div>
                                <img src="./../../../assets/images/dormitory/lived.png" alt="已住">
                                <span>已住：{{floorList.checkedNum}}人  </span>
                            </div>
                            <div>
                                <img src="./../../../assets/images/dormitory/free.png" alt="空余">
                                <span>空余：{{floorList.emptyNum}}人</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="content-list">
                    <div v-for="(val, index) in floorList.floor" :key="index">
                        <span class="floor-title">{{val.name}}</span>
                        <div class="floor-list">
                            <div v-for="(val1, index1) in val.dormitory" :key="index1" class="floor-box">
                                <div>
                                    <span>{{val1.number}}</span>
                                    <span>{{val1.class_name}}</span>
                                    <span class="floor-list-id" v-for="(item11, inde11) in val1.user" :key="inde11" :id="item11.user_number + '_' + item11.user_id"></span>
                                </div>
                                <el-carousel 
                                    :ref="`carouselRoom_${index}_${index1}`"
                                    :data-ref="`carouselRoom_${index}_${index1}`"
                                    trigger="click" 
                                    :autoplay="false"
                                    :arrow="showFloorArrow(val1.user)" 
                                    :indicator-position="showFloorIndicator(val1.user)"
                                    height="100px">
                                    <el-carousel-item v-for="(item, inx) in Math.ceil(val1.bednum/6)" :key="inx">
                                        <span 
                                            class="floor-room-des"
                                            v-for="(item1, inx1) in getRoomPeople(val1.user, inx)" 
                                            :key="inx1" 
                                            :data-index="inx"
                                            :data-leaves="item1.user_number + '_' + item1.user_id"
                                            @click="showInfo(item1)">{{item1.user_name ? item1.user_name : '-'}}</span>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div v-if="activePanel === 'record'">
                <div class="record-content-banner" v-loading="loading.status" :element-loading-text="loading.txt">
                    <div class="banner-list">
                        <img src="./../../../assets/images/dormitory/building_bg.png" alt="宿舍楼">
                        <el-carousel 
                            trigger="click" 
                            :autoplay="false"
                            :arrow="showRdormArrow" 
                            :indicator-position="showRdormIndicator"
                            :initial-index="rActiveIndex"
                            height="236px">
                            <el-carousel-item v-for="(item, inx) in Math.ceil(rDormList.length/10)" :key="inx">
                                <div 
                                    v-for="(item1, inx1) in getRdormNum(inx)" 
                                    class="banner-dorm-list"
                                    :class="getRStyle(inx, inx1)" 
                                    :key="inx1" 
                                    @click="changeRdorm(item1.id, inx, inx1)">
                                    <img :src="getRImage(inx, inx1)" alt="">
                                    <span>{{item1.name}}</span>
                                    <img v-if="inx === rActiveIndex && inx1 === rDormIndex" class="selected-img" src="./../../../assets/images/dormitory/selected.png" alt="">
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>

                <div class="record-content-list">
                    <span class="record-title">访客记录</span>
                    <div class="zh-table-visitor">
                        <el-row :gutter="20">
                            <template  v-for="(item, inx) in recordList">
                                <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="6" :key="inx">
                                    <div class="item-list" @click="goToDetail(item.id)">
                                        <div class="item-title">{{item.name}}</div>
                                        <div class="item-box">
                                            <i class="el-icon-time"></i>{{getTime(item.start_time)}} 至 {{getTime(item.end_time)}}
                                        </div>
                                        <div class="item-footer">
                                            <span><img :src="BASE_URL + '/static/default/user_preview-1.png'">发大水</span>
                                            <span>{{getDateDiff(item.create_time)}}</span>
                                        </div>
                                    </div>
                                </el-col>
                            </template>
                        </el-row>
                    </div>

                    <div class="pageBox" v-if="recordParam.totalNumber > 8">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="changeCurrentPage"
                            :page-size="recordParam.pageSize"
                            :current-page="recordParam.pageIndex"
                            :total="recordParam.totalNumber">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <div v-else class="dormitory-no-data">
            <i class="ipng image_state01"></i>
            <span>没有发现任何相关内容</span>
        </div>

        <el-dialog
            class="student-info"
            title="学生信息"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="infoVisible"
            width="400px">
            <img :src="BASE_URL + studentInfo.avatar_path" alt="个人图片">
            <div>
                <span>用户名：</span>
                <span :title="studentInfo.user_name">{{studentInfo.user_name}}</span>
            </div>
            <div>
                <span>真实姓名：</span>
                <span :title="studentInfo.true_user_name">{{studentInfo.true_user_name}}</span>
            </div>
            <div>
                <span>账号：</span>
                <span :title="studentInfo.user_number">{{studentInfo.user_number}}</span>
            </div>
            <div>
                <span>宿舍楼：</span>
                <span :title="studentInfo.building_name">{{studentInfo.building_name}}</span>
            </div>
            <div>
                <span>寝室：</span>
                <span :title="studentInfo.dormitory_number">{{studentInfo.dormitory_number}}</span>
            </div>
            <div>
                <span>入住时间：</span>
                <span :title="studentInfo.check_in_time">{{studentInfo.check_in_time}}</span>
            </div>
            <div>
                <span>班级：</span>
                <span :title="studentInfo.class_name">{{studentInfo.class_name}}</span>
            </div>
            <div>
                <span>班主任：</span>
                <span :title="studentInfo.class_master">{{studentInfo.class_master}}</span>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import homeImg from './../../../assets/images/dormitory/home.png';
import selhomeImg from './../../../assets/images/dormitory/selHome.png';

export default {
    data() {
        return {
            infoVisible: false, // 显示学生信息
            dormId: undefined, // 当前宿舍楼id -- 住宿列表
            dormName: '', // 当前宿舍楼名称 -- 住宿列表
            rDormId: undefined, // 当前宿舍楼id -- 访客记录
            dormIndex: 0, // 当前幻灯片的宿舍楼索引
            activeIndex: 0, // 幻灯片的索引
            rActiveIndex: 0, // 访客--幻灯片的索引
            rDormIndex: 0, // 访客--当前幻灯片的宿舍楼索引
            keyword: '', // 搜索住宿列表关键字
            activePanel: 'lists', // 当前 tab 页面
            studentList: [], // 学生列表
            recordList: [], // 访客列表
            dormList: [], // 宿舍列表
            rDormList: [], // 访客--宿舍列表
            floorList: [], // 楼层列表
            timer: null, // 定时器
            studentInfo: {}, // 学生信息
            loading: {
              status: false,
              txt: '获取数据...',
            },
            recordParam: {
                totalNumber: 0,
                pageSize: 8,
                pageIndex: 1
            }
        }
    },
    created() {
        if (location.href.split('#')[1] === 'record') {
            this.activePanel = 'record';
        } else {
            this.activePanel = 'lists';
        }

        this.getList();
    },
    computed: {
        /**
         * 返回激活的样式
         * @param {Number} inx 幻灯片索引
         * @param {Number} inx1 宿舍楼索引
         */
        getStyle() {
            return (inx, inx1) => {
                if (inx === this.activeIndex && inx1 === this.dormIndex) {
                    return 'banner-dorm-list-active';
                } else {
                    return '';
                }
            }
        },
        /**
         * 返回激活的图片
         */
        getImage() {
            return (inx, inx1) => {
                if (inx === this.activeIndex && inx1 === this.dormIndex) {
                    return selhomeImg;
                } else {
                    return homeImg;
                }
            }
        },
        /**
         * 返回每页的宿舍人数
         */
        getRoomPeople() {
            return (val, key) => {
                return val.filter((item, inx) => {
                    return inx >= 6 * key && inx < 6 * key + 6;
                })
            }
        },
        /**
         * 返回每页的宿舍楼
         */
        getDormNum() {
            return (key) => {
                return this.dormList.filter((item, inx) => {
                    return inx >= 10 * key && inx < 10 * key + 10;
                })
            }
        },
        /**
         * 根据宿舍楼数是否显示指示器
         */
        showDormIndicator() {
            return this.dormList.length > 10 ? 'outside' : 'none';
        },
        /**
         * 根据宿舍人数是否显示指示器
         */
        showFloorIndicator() {
            return (val) => {
                return val.length > 6 ? 'outside' : 'none';
            }
        },
        /**
         * 是否显示宿舍切换箭头
         */
        showFloorArrow() {
            return (val) => {
                return val.length > 6 ? 'always' : 'never';
            }
        },
        /**
         * 是否显示宿舍楼切换箭头
         */
        showDormArrow() {
            return this.dormList.length > 10 ? 'always' : 'never';
        },

        /******************************* 访客记录 *********************************/
        /**
         * 是否显示访客记录宿舍楼切换箭头
         */
        showRdormArrow() {
            return this.rDormList.length > 10 ? 'always' : 'never';
        },
        /**
         * 根据宿舍楼数是否显示指示器
         */
        showRdormIndicator() {
            return this.rDormList.length > 10 ? 'outside' : 'none';
        },
        /**
         * 返回激活的样式
         * @param {Number} inx 幻灯片索引
         * @param {Number} inx1 宿舍楼索引
         */
        getRStyle() {
            return (inx, inx1) => {
                if (inx === this.rActiveIndex && inx1 === this.rDormIndex) {
                    return 'banner-dorm-list-active';
                } else {
                    return '';
                }
            }
        },
        /**
         * 返回激活的图片
         */
        getRImage() {
            return (inx, inx1) => {
                if (inx === this.rActiveIndex && inx1 === this.rDormIndex) {
                    return selhomeImg;
                } else {
                    return homeImg;
                }
            }
        },
        /**
         * 返回每页的宿舍楼
         */
        getRdormNum() {
            return (key) => {
                return this.rDormList.filter((item, inx) => {
                    return inx >= 10 * key && inx < 10 * key + 10;
                })
            }
        },
        /**
         * 返回时间格式
         * @param {String} time 时间
         */
        getTime() {
            return (time) => {
                return time ? time.substr(0, 10) : '';
            }
        },
    },
    methods: {
        /**
         * 获取宿舍列表
         */
        getList() {
            this.loading.status = true;

            let success = (res => {
                this.loading.status = false;
                this.dormList = deep_clone(res.data);
                this.rDormList = deep_clone(res.data);

                if (res.data.length > 0) {
                    this.dormId = res.data[0].id;
                    this.rDormId = res.data[0].id;
                    this.dormName = res.data[0].name;
                    this.getFloorList();
                    this.getRecord();
                }  
            })

            this.$ajax({
                url: "api/dormitory/getdormitoryBuildingByUserRole",
                method: "get",
                params: {
                    user_id: this.$g.user_id
                },
                func: {
                    success: success
                }
            });
        },
        /**
         * 获取楼层信息
         * @param {Object} item 根据学生类获取宿舍楼和楼层信息
         */
        getFloorList(item) {
            if (!is_empty(item)) {
                if (item.building_id === this.dormId) {
                    this.selectNumber(item);
                    return false;
                } else {
                    this.dormId = item.building_id;
                }
            }

            let success = (res => {
                this.floorList = res.data;
                
                this.$nextTick(() => {
                    if (!is_empty(item)) {
                        this.selectNumber(item);
                    }
                })
            })

            this.$ajax({
                url: "api/dormitory/getDormitoryUser",
                method: "get",
                params: {
                    building_id: this.dormId
                },
                func: {
                    success: success
                }
            });
        },
        /**
         * 选中学生数据
         * @param {Object} item 选中的信息
         */
        selectNumber(item) {
            this.dormList.forEach((val, inx) => {
                if (val.id === item.building_id) {
                    this.activeIndex = Math.floor(inx / 10);
                    this.dormIndex = inx - Math.floor(inx / 10) * 10;
                    this.$refs['carouselBanner'].setActiveItem(this.activeIndex);
                }
            })
            
            let dom = document.querySelector('#maodian');
            let student = document.querySelectorAll('.floor-room-des');
            let id = item.number + '_' + item.id;
            let href = '#' + id;

            dom.href = href;
            dom.click();

            let top = document.documentElement.scrollTop;
            document.documentElement.scrollTop = top - 90;

            student.forEach(item1 => {
                if (item1.dataset.leaves === id) {
                    let refName = item1.closest('.el-carousel').dataset.ref;
                    this.$refs[refName][0].setActiveItem(item1.dataset.index);
                    item1.click();
                }
            })
        },
        /**
         * 根据关键字查询数据
         */
        querySearchAsync(queryString, cb) {
            if (this.keyword !== '') {
                let _this = this;
                let params = {
                    keyword: this.keyword,
                    data_style: 1
                }
                let success = (res => {
                    let tempList = [];
                    this.studentList = res.data;

                    this.studentList.forEach(item => {
                        let name = item.building_name ? ' [' + item.building_name + ']' : '';

                        tempList.push({
                            value: item.user_number + name, 
                            number: item.user_number,
                            id: item.user_id,
                            building_id: item.building_id
                        })
                    })

                    cb(tempList);
                });

                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    _this.$ajax.get('api/dormitory/getUserByKeyword', {params: params, func: {success: success}});
                }, 500);
            } else {
                cb([])
            }
        },
        /**
         * 获取访客记录
         */
        getRecord() {
            let success = (res => {
                this.recordList = res.data.data;
                this.recordParam.totalNumber = res.data.data_sum;
            })
            this.$ajax({
                url: "api/dormitory/dormitoryVisitor",
                method: "get",
                params: {
                    building_id: this.rDormId,
                    page_size: this.recordParam.pageSize,
                    page_index: this.recordParam.pageIndex
                },
                func: {
                    success: success
                }
            });
        },
        /**
         * 切换宿舍楼
         * @param {Object} item 宿舍楼信息
         * @param {Number} inx 幻灯片索引
         * @param {Number} inx1 宿舍楼索引
         */
        changeDorm(item, inx, inx1) {
            this.activeIndex = inx;
            this.dormIndex = inx1;
            this.dormId = item.id;
            this.dormName = item.name;

            this.getFloorList();
        },
        /**
         * 访客--切换宿舍楼
         * @param {Number} id 宿舍楼id
         * @param {Number} inx 幻灯片索引
         * @param {Number} inx1 宿舍楼索引
         */
        changeRdorm(id, inx, inx1) {
            this.rActiveIndex = inx;
            this.rDormIndex = inx1;
             this.rDormId = id;

            this.getRecord();
        },
        /**
         * 显示学生信息
         */
        showInfo(item) {
            if (item.user_name == '') return false;

            this.infoVisible = true;
            this.studentInfo = item;
        },
        /**
         * 切换tab页面
         * @param {String} name tab 名称
         */
        changePanel(name) {
            this.activePanel = name;

            if (this.activePanel == 'lists') {
                location.hash = ""
            } else {
                location.hash = "#record"
            }
        },
        /**
         * 切换当前页数据
         */
        changeCurrentPage(val) {
            this.recordParam.pageIndex = val;

            this.getRecord();
        },
        /**
         * 跳到详情页
         * @param {Number} id 记录 id
         */
        goToDetail(id) {
            this.$router.push(`/dormitory/detail?id=${id}`);
        },
        /**
         * 返回创建时间离现在时间的长度
         * @param {Number} dateStr 时间戳
         */
        getDateDiff (dateStr) {
            var publishTime = Date.parse(dateStr.replace(/-/gi,"/")) / 1000,
                Dseconds,
                Dminutes,
                Dhours,
                Ddays,
                timeNow = parseInt(new Date().getTime()/1000),
                d,

                date = new Date(publishTime*1000),
                Y = date.getFullYear(),
                M = date.getMonth() + 1,
                D = date.getDate(),
                H = date.getHours(),
                m = date.getMinutes(),
                s = date.getSeconds();
                //小于10的在前面补0
                if (M < 10) {
                    M = '0' + M;
                }
                if (D < 10) {
                    D = '0' + D;
                }
                if (H < 10) {
                    H = '0' + H;
                }
                if (m < 10) {
                    m = '0' + m;
                }
                if (s < 10) {
                    s = '0' + s;
                }

            d = timeNow - publishTime;
            Ddays = parseInt(d/86400);
            Dhours = parseInt(d/3600);
            Dminutes = parseInt(d/60);
            Dseconds = parseInt(d);

            if(Ddays > 0 && Ddays < 3){
                    return M + '-' + D + ' ' + H + ':' + m;
            }else if(Ddays <= 0 && Dhours > 0){
                return '昨天'+ ' ' + H + ':' + m;
            }else if(Dhours <= 0 && Dminutes > 0){
                    return H + ':' + m;
            }else if (Dseconds < 60) {
                return '刚刚';
            }else if (Ddays >= 3 && Ddays < 30){
                return M + '-' + D + ' ' + H + ':' + m;
            }else if (Ddays >= 30) {
                return M + '-' + D + ' ' + H + ':' + m;
            }
        }
    },
}
</script>

<style lang="scss">
    .dormitory-list {
        margin: auto;
        margin-bottom: 64px;
        max-width: 1200px;
        min-height: calc(100vh - 206px);

        #maodian {
            visibility: hidden;
        }

        .floor-list-id {
            position: absolute;
            top: 0;
            right: 0;
            visibility: hidden;
        }

        .content-head {
            margin: 18px 0 20px;
            padding: 0 40px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
            box-sizing: border-box;

            >span {
                display: inline-block;
                margin-right: 60px;
                padding: 22px 0;
                font-size: 14px;
                color: #666;
                border-bottom: 4px solid transparent;
                cursor: pointer;
            }

            .head-active-title {
                color: #348EFC;
                border-bottom: 4px solid #348EFC;
            }
        }

        .content-banner{
            margin-bottom: 20px;
            background-color: #fff;

            .banner-search {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 34px;
                height: 74px;
                line-height: 74px;
                background: #D7E8FF;
                border-radius: 3px 3px 0px 0px;
                box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);

                >div {
                    width: 300px;

                    input {
                        height: 36px;
                        border-radius: 18px;
                        border: 1px solid #DDDDDD;
                    }
                }
            }

            .banner-list {
                display: flex;
                margin-top: 36px;
                margin-bottom: 7px;
                padding: 0 40px;

                >img {
                    margin-right: 28px;
                    width: 220px;
                    height: 220px;
                    object-fit: contain;
                }

                >div {
                    flex: 1;

                    .el-carousel__container {
                        >div {
                            display: flex;
                            flex-wrap: wrap;
                            padding: 0 20px;
                            box-sizing: border-box;

                            .banner-dorm-list {
                                position: relative;
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                justify-content: space-between;
                                padding: 20px 0;
                                margin-bottom: 20px;
                                margin-right: 20px;
                                width: 150px;
                                height: 104px;
                                line-height: 104px;
                                font-size: 16px;
                                color: #666;
                                border: 1px solid #F3F3F3;
                                border-radius: 3px;
                                box-shadow: 0 0 20px 0 rgba(245,245,245,0.50);
                                box-sizing: border-box;
                                cursor: pointer;

                                >span {
                                    display: inline-block;
                                    max-width: 130px;
                                    line-height: normal;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                }

                                .selected-img {
                                    position: absolute;
                                    right: 0;
                                    top: 0;
                                }
                            }

                            .banner-dorm-list:nth-child(5n) {
                                margin-right: 0;
                            }

                            .banner-dorm-list:hover {
                                border: 1px solid #69CC7E;
                            }

                            .banner-dorm-list-active {
                                color: #69CC7E;
                                font-size: 16px;
                                background: #F6FFFB;
                                border: 1px solid #69CC7E;
                            }
                        }

                        .el-carousel__arrow i {
                            font-size: 22px;
                        }

                        .el-carousel__arrow--left {
                            left: -12px;
                        }

                        .el-carousel__arrow--right {
                            right: -12px;
                        }
                    }
                }
            }

            .banner-num {
                display: flex;
                align-items: center;
                margin-left: 40px;
                margin-right: 40px;
                padding: 18px 0;
                border-top: 1px solid #EFEFEF;

                >span {
                    margin-right: 14px;
                    font-size: 20px;
                    color: #000;
                    max-width: 400px;
                    line-height: normal;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                >div {
                    display: flex;
                    flex: 1;

                    >div {
                        margin-right: 40px;
                        color: #000;
                        font-size: 14px;

                        img {
                            vertical-align: middle;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }

        .content-list {
            >div {
                margin-bottom: 10px;
            }

            .floor-title {
                display: inline-block;
                margin-top: 24px;
                margin-bottom: 14px;
                padding: 0px 16px;
                height: 30px;
                min-width: 78px;
                max-width: 800px;
                line-height: 30px;
                font-size: 18px;
                text-align: center;
                color: #FFFFFF;
                background: #7C95CE;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
                box-sizing: border-box;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            .floor-list {
                display: flex;
                flex-wrap: wrap;

                .floor-box {
                    position: relative;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    padding: 8px 20px;
                    width: 390px;
                    height: 180px;
                    background: #FFFFFF;
                    border-radius: 4px;
                    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10);
                    box-sizing: border-box;

                    >div:first-child {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        margin-bottom: 34px;

                        span:first-child {
                            font-size: 18px;
                            color: #000;
                        }

                        span:last-child {
                            font-size: 12px;
                            color: #333;
                        }
                    }

                    .el-carousel {
                        height: 100%;

                        .el-carousel__item {
                            display: flex;
                            flex-wrap: wrap;
                            padding: 0 8px;

                            span {
                                margin-right: 32px;
                                padding: 0 4px;
                                margin-bottom: 16px;
                                margin-right: 32px;
                                width: 90px;
                                height: 34px;
                                line-height: 34px;
                                font-size: 14px;
                                text-align: center;
                                color: #000000;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                border: 1px solid #F3F3F3;
                                box-sizing: border-box;
                                overflow: hidden;
                                cursor: pointer;
                            }

                            span:hover {
                                color: #ABCEED;
                                border: 1px solid #ABCEED;
                            }

                            span:nth-child(3n) {
                                margin-right: 0;
                            }
                        }
                    }
                }

                .floor-box:nth-child(3n) {
                    margin-right: 0;
                }
            }
        }

        .record-content-banner {
            margin-bottom: 20px;
            background-color: #fff;

            .banner-list {
                display: flex;
                margin-top: 36px;
                margin-bottom: 7px;
                padding: 40px 40px 8px;

                >img {
                    margin-right: 28px;
                    width: 220px;
                    height: 220px;
                    object-fit: contain;
                }

                >div {
                    flex: 1;

                    .el-carousel__container {
                        >div {
                            display: flex;
                            flex-wrap: wrap;
                            padding: 0 20px;
                            box-sizing: border-box;

                            .banner-dorm-list {
                                position: relative;
                                display: flex;
                                align-items: center;
                                flex-direction: column;
                                justify-content: space-between;
                                padding: 20px 0;
                                margin-bottom: 20px;
                                margin-right: 20px;
                                width: 150px;
                                height: 104px;
                                line-height: 104px;
                                font-size: 16px;
                                color: #666;
                                border: 1px solid #F3F3F3;
                                border-radius: 3px;
                                box-shadow: 0 0 20px 0 rgba(245,245,245,0.50);
                                box-sizing: border-box;
                                cursor: pointer;

                                >span {
                                    line-height: normal;
                                }

                                .selected-img {
                                    position: absolute;
                                    right: 0;
                                    top: 0;
                                }
                            }

                            .banner-dorm-list:nth-child(5n) {
                                margin-right: 0;
                            }

                            .banner-dorm-list:hover {
                                border: 1px solid #69CC7E;
                            }

                            .banner-dorm-list-active {
                                color: #69CC7E;
                                font-size: 16px;
                                background: #F6FFFB;
                                border: 1px solid #69CC7E;
                            }
                        }

                        .el-carousel__arrow i {
                            font-size: 22px;
                        }

                        .el-carousel__arrow--left {
                            left: -12px;
                        }

                        .el-carousel__arrow--right {
                            right: -12px;
                        }
                    }
                }
            }
        }

        .record-content-list {
            .record-title {
                display: inline-block;
                margin-bottom: 10px;
                width: 110px;
                height: 30px;
                line-height: 30px;
                font-size: 18px;
                text-align: center;
                color: #FFFFFF;
                background: #7C95CE;
                border-top-right-radius: 15px;
                border-bottom-right-radius: 15px;
            }
            
            .zh-table-visitor {
                margin-top: 10px;

                .item-list {
                    margin-bottom: 20px;
                    padding: 46px 20px 18px;
                    min-height: 200px;
                    background-size: cover;
                    background-repeat: no-repeat;
                    background-image: url('./../../../assets/images/dormitory/visitor-gb.png');
                    box-sizing: border-box;
                    cursor: pointer;

                    .item-title {
                        margin-bottom: 22px;
                        font-size: 19px;
                        color: #000;
                        line-height: normal;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                    }

                    .item-box {
                        margin-bottom: 34px;
                        font-size: 12px;
                        color: #666666;
                        border-radius: 14px;

                        i {
                            margin-right: 10px;
                        }
                    }

                    .item-footer {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        color: #333;

                        img {
                            margin-right: 10px;
                            width: 40px;
                            height: 40px;
                            background: #fff;
                            vertical-align: middle;
                            border-radius: 50%;
                            object-fit: cover;
                        }

                        >span {
                            color: #333;
                            font-size: 14px;
                        }
                    }
                }
            }

            .pageBox {
                display: inline-block;
                background: #fff;

                .el-pagination.is-background .btn-prev,
                .el-pagination.is-background .btn-next,
                .el-pagination.is-background .el-pager li {
                    background: #fff;
                }

                .el-pagination.is-background .el-pager .active {
                    background: #409EFF;
                }
            }
        }

        .dormitory-no-data {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 301px);
            font-size: 20px;
            background: #fff;

            >span {
                margin-top: 14px;
                color: #888;
            }
        }

        .el-carousel {
            overflow: hidden;

            .el-carousel__indicators {
                .is-active button {
                    background: #ABCEED;
                }

                .el-carousel__button {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                }
            }

            .el-carousel__container {
                .el-carousel__arrow--left {
                    left: -10px;
                }

                .el-carousel__arrow--right {
                    right: -10px;
                }

                >button {
                    color: #2C2C2C;
                    background: transparent;

                    i {
                        font-size: 20px;
                    }
                }
            }
        }

        .student-info {
            .el-dialog__header {
                padding: 0 0 0 20px;
                height: 36px;
                line-height: 36px;
                background: #348EFC;

                >span {
                    font-size: 14px;
                    color: #FFFFFF;
                }

                button {
                    top: 10px;

                    i {
                        color: #fff;
                    }
                }
            }

            .el-dialog__body {
                padding: 42px 48px;

                img {
                    margin-left: 102px;
                    margin-bottom: 36px;
                    width: 100px;
                    height: 100px;
                    object-fit: contain;
                }

                div {
                    display: flex;
                    margin-bottom: 10px;

                    span:first-child {
                        display: inline-block;
                        width: 94px;
                        font-size: 14px;
                        color: #666;
                    }

                    span:last-child {
                        font-size: 14px;
                        color: #000;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        word-break: keep-all;
                        display: block;
                        flex: 1;
                    }
                }
            }
        }
    }
</style>